<template>
  <!--视图容器-->
  <el-container style="padding:20px;">
    <div class="card-box">
      <!--主要引用页面-->
      <el-aside class="typeAside" width="280px">
        <el-input v-model="filterText" size="small" prefix-icon="el-icon-search" placeholder="请输入内容" clearable style="width:200px;" />
        <el-button type="success" size="small" icon="el-icon-circle-plus" style="width:80px;" @click="prepClick">
          新增
        </el-button>
        <el-tree
          ref="menuTable"
          class="menuTable"
          :props="defaultProps"
          :data="data"
          node-key="pathid"
          highlight-current
          default-expand-all
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          @node-click="handleNodeClick"
        >
          <!-- eslint-disable-next-line vue/no-template-shadow -->
          <span slot-scope="{data}" class="custom-tree-node">
            <span>
              <svg-icon icon-class="clipboard" />
              <span v-if="data.typeName.length>8" :title="data.typeName">
                {{ " " + data.typeName.slice(0,13)+"..." }}</span>
              <span v-else> {{ " " + data.typeName }}</span>
            </span>
            <span class="handle-tool">
              <el-dropdown>
                <span class="el-dropdown-link">
                  <i class="el-icon-more" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-if="!data.parentId" @click.native="handleAdd(data)">
                    <i class="el-icon-circle-plus-outline" />添加
                  </el-dropdown-item>
                  <el-dropdown-item @click.native="handleDelete(data)">
                    <i class="el-icon-delete" />删除
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </span>
          </span>
        </el-tree>
      </el-aside>
      <el-main>
        <br>
        <br>
        <br>
        <el-form
          ref="refForm"
          :inline="true"
          :model="form"
          label-width="150px"
          class="menu-form"
          style="width: calc(100% - 300px)"
        >

          <span>
            <el-form-item label="名 称" prop="typeName" :rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]">
              <el-input v-model="form.typeName" placeholder="请输入类型名称" style="width: 300px;" clearable />
            </el-form-item>
          </span>
          <el-form-item label="上级类型">
            <el-input v-model="form.superiorFile" readonly style="width: 300px;" disabled />
          </el-form-item>
          <br>
          <el-form-item label="排序编号">
            <el-input-number v-model="form.sort" controls-position="right" :min="1" :max="99" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="form.remark" type="textarea" :rows="9" placeholder="请输入内容" style="width: 800px;" />
          </el-form-item>
          <div class="form-btn">
            <el-button type="primary" size="medium" @click="submit('refForm')">保 存</el-button>
            <el-button type="primary" plain size="medium" @click="resetForm('refForm')">重 置</el-button>
          </div>
        </el-form>
      </el-main>
    </div>
    <!--主要引用页面结束-->
  </el-container>
  <!--内容结束-->
</template>
<script>
import API from "../API/CommonAPI.js";
export default {
  name: "FormType",
  components: {
  },
  data() {
    return {
      recordType: [],
      filterText: "",
      loading: false,
      id: "",
      addState: false,
      form: {
        typeName: "",
        id: "",
        sort: "",
        pathid: "",
        datatypeid: "",
        superiorFile: "无上级类型",
        remark: ""
      },
      prodOptions: [],
      isExpand: false, // 是否展开树节点
      options: [
        {
          id: 0,
          meta: {
            title: "无上级目录"
          }
        }
      ],
      props: {
        value: "pathid", // ID字段名
        label: "typeName", // 显示名称
        children: "childrens" // 子级字段名
      },
      defaultProps: {
        label: "typeName",
        children: "childrens" // 子级字段名
      },
      treeLoading: false, // 菜单树loading
      data: []
    }
  },
  watch: {
    filterText(val) {
      this.$refs.menuTable.filter(val)
    },
  },
  mounted() {
    this.GetTypeTree()
  },

  created() {

  },
  methods: {
    // 树节点选中事件
    handleNodeClick(v, e) {
      this.form.id = v.id
      if (e.parent.data.typeName) {
        this.form.superiorFile = e.parent.data.typeName
      } else {
        this.form.superiorFile = "无上级类型"
      }
      this.form.typeName = v.typeName
      this.form.sort = v.sort
      this.form.remark = v.remark
    },
    // 添加下级菜单
    handleAdd(data) {
      this.addState = true
      setTimeout(() => {
        this.form = {
          id: data.id,
          sort: 1,
          superiorFile: data.typeName,
          typeName: ""
        }
      }, 500)
    },
    // 删除
    handleDelete(data) {
      this.$confirm("此操作将删除该类型, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        API.TypeDelete({ id: data.id }).then(res => {
          if (res.success) {
            this.$message({
              message: '删除成功',
              type: "success",
              showClose: true
            })
            this.GetTypeTree()
          } else {
            this.$message({
              message: res.data || res.message,
              type: "error",
              showClose: true
            })
          }
        })
      })
    },
    // 树节点过滤
    filterNode(value, data) {
      if (!value) return true
      return data.typeName.indexOf(value) !== -1
    },
    // 查询菜单树
    GetTypeTree() {
      this.treeLoading = true
      API.GetTypeTreeList({}).then(res => {
        this.treeLoading = false
        this.data = res.data
      })
    },
    prepClick() {
      this.resetForm()
    },
    // 菜单收缩/展开
    switchExpand(arr, isExpand) {
      arr.forEach((item) => {
        this.$refs.menuTable.store.nodesMap[item.pathid].expanded = isExpand
        if (item.child) {
          this.switchExpand(item.child, isExpand)
        }
      })
    },
    // 表单提交
    submit(formName) {
      this.$refs[formName].validate(valid => {
        console.log(this.form)
        if (valid) {
          this.loading = true
          if (this.form.id && !this.addState) {
            API.TypeEdit(this.form).then((res) => {
              this.$message({
                message: "编辑成功",
                type: "success",
                duration: 1000,
                showClose: true
              })
              this.loading = false
              this.GetTypeTree()
              this.resetForm()
            })
          } else {
            const obj = {
              typeName: this.form.typeName,
              parentId: this.form.id,
              remark: this.form.remark,
              sort: this.form.sort
            }
            API.TypeAdd(obj).then((res) => {
              this.$message({
                message: "创建成功",
                type: "success",
                duration: 1000,
                showClose: true
              })
              this.loading = false
              this.GetTypeTree()
              this.resetForm()
            })
          }
        } else {
          console.log("error submit!!")
          return false
        }
      })
    },
    resetForm() {
      if (this.form.id) {
        delete this.form.id
      }
      this.addState = false
      this.form.typeName = ""
      this.form.id = ""
      this.form.sort = 1
      this.form.remark = ""
      this.form.superiorFile = "无上级类型"
    }

  }
}
</script>

<style scoped>
.el-container {
	height: calc(100vh - 0px);
    background: #f0f0f2;
}
.el-aside {
	height: 100%;
	padding: 0;
	overflow: hidden;
	margin-right: 10px;
}
.el-aside .title {
	margin: 0;
	font-size: 15px;
	text-indent: 1em;
}
.el-aside .el-tree {
	height: calc(100% - 72px);
	overflow-y: auto;
}
.el-aside /deep/.el-tree-node__content {
	height: 32px;
}
body > .el-dropdown-menu {
	margin-top: 0 !important;
}
.menu-form .el-form-item__content {
	width: 600px;
}
.card-box {
	width: 100%;
	display: flex;
	height: 100%;
}
.card-box .el-row {
	height: 100%;
	overflow: auto;
	margin: 0 !important;
}
.card-box .el-row .el-col {
	margin-bottom: 10px;
}
.el-main {
	margin-left: 10px;
	padding: 0;
}
.el-main .el-form .form-btn {
	padding-left: 150px;
}
.custom-tree-node {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	padding-right: 8px;
	color: #fff;
}
.custom-tree-node .svg-icon {
	color: #18b4ff;
	margin-right: 5px;
}
.custom-tree-node .handle-tool {
	display: none;
}
.custom-tree-node .handle-tool .el-dropdown-link {
	color: #fff;
}
.custom-tree-node:hover .handle-tool {
	display: block;
}

</style>

